import React from 'react';

import './index.less';

import {render, connect} from '../../../../../hrpub/common/frame';

import Layout from '../../../../../hrpub/common/components/Layout';

import BackBtn from '../../../../../hrpub/common/components/hr-back';

import MainAction from './actions/main';
import FormAction from '../../actions/form';
import RowHandleAction from '../../actions/rowHandle';
import OrgSituationAction from '../../actions/orgSituation';
import ViewContractAction from '../../actions/viewContract';

import PageHeader from './components/Header';

const {Header, Content} = Layout;

const Wrapper = render({
    actions: {
        mainAct: MainAction,
        formAct: FormAction,
        rowAct: RowHandleAction,
        orgSta: OrgSituationAction,
        vcAct: ViewContractAction
    }
})(({props, action, state}) => {
    const {form, emp, cardPagination} = props;

    return (
        <Layout
            className="nc-bill-card employing-add-page"
        >
            <Header
                showOrgRefer={false}
                showButtons={false}
                customButton={(() => {
                    return (
                        <PageHeader
                            button={props.button}
                            status={emp.addPageStatus}
                            onClick={action.mainAct.addHeaderClick}
                            language={emp.language}
                            cancelEdit={action.mainAct.cancelFormEdit}
                            cardPagination={cardPagination}
                            toBrowsePage={action.formAct.toBrowsePage}
                            fromApprove={emp.fromApprove}
                        />
                    );
                })()}
            >
                <If condition={!emp.fromApprove && emp.addPageStatus !== 'edit'}>
                    <BackBtn 
                        onClick={action.mainAct.goToBackMainPage}
                        style={{
                            marginTop: '-4px'
                        }}
                    />
                </If>
            </Header>
            <Content
                style={{
                    height: 'auto'
                }}
                className="nc-bill-form-area"
            >
                {form.createForm('card', {
                    onBeforeEvent: action.mainAct.formBeforeEdit,
                    onAfterEvent: action.mainAct.formAfterEdit,
                    setVisibleByForm:true,
                    isNoStandard: true
                })}
            </Content>
        </Layout>
    );
});

export default connect(Wrapper);